import { DeleteOutlined, PlusOutlined, SettingOutlined } from '@ant-design/icons';
import { Button } from 'antd';
import Table, { ColumnsType } from 'antd/es/table';
import React, { useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { NodeProps } from 'reactflow';
import { useContextSelector } from 'use-context-selector';

import FormLabel from '@/components/MyBox/FormLabel';
import { FlowNodeInputItemType } from '@/types/workflow/io';
import { FlowNodeItemType } from '@/types/workflow/node';

import { WorkflowContext } from '../../../context';
import Container from '../../flow/Container';
import NodeCard from '../render/NodeCard';
import { defaultEditFormData } from '../render/RenderToolInput/EditFieldModal';

import ToolParamsEditModal from './ToolParamsEditModal';

const NodeToolParams = ({ data, selected }: NodeProps<FlowNodeItemType>) => {
  const { t } = useTranslation();
  const [editField, setEditField] = useState<FlowNodeInputItemType>();
  const { nodeId, inputs } = data;
  const onChangeNode = useContextSelector(WorkflowContext, (v) => v.onChangeNode);

  const Render = useMemo(() => {
    const columns: ColumnsType<FlowNodeInputItemType> = [
      {
        title: t('tool_params.params_name'),
        dataIndex: 'key',
        key: 'key',
        align: 'center',
      },
      {
        title: t('tool_params.params_description'),
        dataIndex: 'toolDescription',
        key: 'toolDescription',
        align: 'center',
      },
      {
        title: t('common.Operation'),
        dataIndex: 'required',
        key: 'required',
        align: 'center',
        width: '100px',
        render: (_, record) => (
          <div className="ml-auto flex justify-center gap-2">
            <Button type="text" icon={<SettingOutlined />} onClick={() => setEditField(record)} />
            <Button
              type="text"
              danger
              icon={<DeleteOutlined />}
              onClick={() => {
                onChangeNode({
                  nodeId,
                  type: 'delInput',
                  key: record.key,
                });
                onChangeNode({
                  nodeId,
                  type: 'delOutput',
                  key: record.key,
                });
              }}
            />
          </div>
        ),
      },
    ];
    return (
      <NodeCard selected={selected} {...data}>
        <Container>
          <div className="mb-2 flex items-center justify-between">
            <FormLabel>{t('tool_custom_field')}</FormLabel>
            <Button
              type="text"
              icon={<PlusOutlined />}
              onClick={() => setEditField(defaultEditFormData)}
            >
              {t('add_new_param')}
            </Button>
            {!!editField && (
              <ToolParamsEditModal
                defaultValue={editField}
                nodeId={nodeId}
                onClose={() => setEditField(undefined)}
              />
            )}
          </div>
          <div className="overflow-hidden rounded-md border-bgBase">
            <Table bordered size="small" pagination={false} dataSource={inputs} columns={columns} />
          </div>
        </Container>
      </NodeCard>
    );
  }, [selected, data, t, editField, inputs, onChangeNode, nodeId]);

  return Render;
};

export default React.memo(NodeToolParams);
